<style type="text/css">
	.selectFeed{
		float: left;
	    height: 50px;
	    margin: 0;
	    padding: 0 15px;
	    border-right: solid 1px #CCC !important;
	    border: none;
	    background: white;
	    color: #4e4e4e;
	    cursor: pointer;
	}
	.feedContentLeft{
		width:49%;background: white;float: left;box-shadow: 0 1px 2px #ccc; padding: 10px 0;margin-top: 10px;clear: left;
	}
	.feedContentRight{
		width:49%;background: white;float:right;box-shadow: 0 1px 2px #ccc; padding: 10px 0;margin-top: 10px;clear: right;
	}

	.overlay-bg {
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    height:100%;
	    width: 100%;
	    cursor: pointer;
	    background: rgba(0,0,0,0.75);
	    z-index: 9999;
	}
	.overlay-content {
	    background: #fff;
	    padding: 1%;
	    width: 40%;
	    position: relative;
	    top: 10%;
	    left: 30%;
	    cursor: default;
	    box-shadow: 0 0 5px rgba(0,0,0,0.9);
	    height: 80%;
	    overflow: auto;
	}
	.containerYoutube {
	    position: relative;
	    width: 100%;
	    height: 0;
	    padding-bottom: 60%;
	}
	.videoYouTube {
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.containerContentFeed{
		width: 95%;margin: 0 auto;
	}
	.strokeContentFeed{
		width:100%; height:1px;border-top: solid 1px #CCC; margin: 10px 0
	}
	.btnOverplay{
		border: none;background: none;color: #555;
	}
</style>
<div id="loading"></div>
<div style="width: 100%;background: white; height: 50px; border: solid 1px #CCC;margin-bottom: 10px;">
	<input type="button" value="Dòng thời gian" class="selectFeed" style="font-weight: bold"/>
	<input type="button" value="Thông tin" class="selectFeed"/>
	<input type="button" value="Danh sách nhạc" class="selectFeed"/>
	<input type="button" value="Bạn bè" class="selectFeed"/>
	<img src="<?php echo Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/borderSelectFeed.png'?>" style="float: left; clear: both; margin-top: -8px; margin-left: 58px;">
</div>

<div class="feedContentLeft" style="background: #f6f7f8;box-shadow:none; border: solid 1px #CCC;">
	<div class="containerContentFeed">
		<button style="border: none;background: none; float: left;">
			<img src="<?php echo Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/iconAddVideo.png'?>">
			<div style="float: right;margin-top:2px">Thêm video</div>
		</button>
		<button style="border: none;background: none; float: left;">
			<img src="<?php echo Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/iconAddList.png'?>">
			<div style="float: right;margin-top:2px;cursor: pointer;">Thêm danh sách</div>
		</button>
	</div>
</div>

<!--<div class="feedContentRight">
	<div class="containerContentFeed">
		<div class="containerYoutube">
			<iframe width="100%" height="100%" src="//www.youtube.com/embed/QDC9KE0-kwM"
		frameborder="0" allowfullscreen class="videoYouTube"></iframe>
		</div>
	</div>
</div>

<div class="feedContentLeft" style="background: white; margin-top: 0; box-shadow:none; border-left: solid 1px #CCC;border-right: solid 1px #CCC;border-bottom: solid 1px #CCC;">
	<img src="<?php echo Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/borderStatus.png'?>" style="float: left; clear: both; margin-top: -18px; margin-left: 50px;">
	<div class="containerContentFeed">
		<form>
			<input type="text" name="content" value="Bạn đang nghĩ gì" style="border: none; padding: 2px; width: 100%;color: #646464;" />
		</form>
	</div>
</div>

<div  class="feedContentLeft">
	<div class="containerContentFeed">
		<div class="containerYoutube">
			<iframe width="100%" height="100%" src="//www.youtube.com/embed/QDC9KE0-kwM"
		frameborder="0" allowfullscreen class="videoYouTube"></iframe>
		</div>
	</div>
</div>-->
<div id="divListMusicContent">
<?php
$currentQuantity = 0;
$userPage = $data['user-page'];

foreach ($data['content'] as $music)
{
	++$currentQuantity;

	if(($currentQuantity%2)==1)
	{
		echo <<<CONTENT
		<div class="feedContentRight">
			<div class="containerContentFeed">
CONTENT;

	}
	else
	{
		echo <<<CONTENT
		<div class="feedContentLeft">
			<div class="containerContentFeed">
CONTENT;

	}

	echo '<div style="width: 15%;float:left;height: 60px;">';
	echo '<img style="border: solid 1px #CCC;width:80%;" src="'.Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/avatar/'.$music['user']['avatar'].'"/></div>';
	echo '<div style="width: 85%;float:right;font-size: 1.1em;font-weight: bold; margin-top: 6px;">';
	echo '<a href="'.Yii::app()->request->baseUrl.'/Page/Feed/'.$music['user']['id'].'">';
	echo $music['user']['name'].'</a>';
	echo '<img style="float:right;cursor: pointer;" src="'.Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/iconViewFunctionContent.png"></div>';
  	echo '<div style="width: 85%;float:right;font-size: 0.8em;">'.$music['posttime'].'</div>';
  	echo '<div style="width: 85%;float:right;font-size: 0.8em;">';
  	echo '<img src="'.Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/'.$music['pricavy'].'.png"  style="cursor: pointer;"/></div>';
  	echo '<div style="clear:both"></div>';

	//echo "-----------VIDEO------------<br/>";
	if($music['type'] == 'music')
	{
		echo '<a href="'.Yii::app()->request->baseUrl.'/Page/Music/'.$music['id'].'"><span style="font-weight: bold; font-size: 1.3em;">'.$music['title'].'</span>';
		echo '<p style="margin-top: 10px;">'.$music['content'].'</p>';
		//echo 'Link video : '.$music['link'].'<br/>';
		$idDivVideo = $music['type'].$music['id'].'Div';
		echo <<<VIDEO
		<div class="containerYoutube" $idDivVideo>
			<iframe width="100%" height="100%" src="//www.youtube.com/embed/$music[link]"
		frameborder="0" allowfullscreen class="videoYouTube"></iframe>
		</div>
VIDEO;
	}
	else
	{
		$idDivVideo = $music['type'].$music['id'].'Div';
		echo '<a href="'.Yii::app()->request->baseUrl.'/Page/List/'.$music['id'].'"><span style="font-weight: bold; font-size: 1.3em;">'.$music['title'].'</span></a>';
		echo '<p style="margin-top: 10px;">'.$music['content'].'</p>';
		$link = $music['link'][0]['link'];
		echo <<<VIDEO
		<div class="containerYoutube" id="$idDivVideo">
			<iframe width="100%" height="100%" src="//www.youtube.com/embed/$link"
		frameborder="0" allowfullscreen class="videoYouTube"></iframe>
		</div>
VIDEO;
		echo '<div style="margin-top:10px">';
		$temp = 0;
		foreach ($music['link'] as $data) {
			++$temp;
			echo '<a href="javascript:void(0)" onclick="changeVideo(\''.$idDivVideo.'\',\''.$data['link'].'\')">';
			echo "<strong>$temp".' : '.$data['title'].'<br/></strong></a>';
			//echo 'Link video : '.$data['link'].'<br/>';
		}
		echo '</div>';
	}

	echo '<div class="strokeContentFeed"></div>';
	$user_id = Yii::app()->user->getId();
	if(isset($music['like']['data'][$user_id])){
		echo '<a href="javascript:void(0)" id="'.$music['type'].$music['id'].'Like" onclick="likeListMusic(\'unLike\',\''.$music['type'].'\','.$music['id'].')">Đã thích</a>&nbsp - &nbsp';
	}else{
		echo '<a href="javascript:void(0)" id="'.$music['type'].$music['id'].'Like" onclick="likeListMusic(\'like\',\''.$music['type'].'\','.$music['id'].')">Thích</a>&nbsp - &nbsp';
	}

	echo '<a href="javascript:void(0)">Bình luận</a>&nbsp - &nbsp';
	echo '<a href="javascript:void(0)">Chia sẽ</a>';

	echo '<div class="strokeContentFeed"></div>';
	echo '<img src="'.Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/iconLike.png"/>';
	echo $music['contentLike'];
	echo '<div class="strokeContentFeed"></div>';

	echo <<<LIKE
	<div class="overlay-bg">
		<div class="overlay-content">
			<div style="width:100%;font-size: 1.5em;font-weight: bold; padding: 10px 0;border-bottom: solid 1px #CCC; margin-bottom: 10px;">Những người thích bài viết này</div>
LIKE;
	foreach ($music['like']['data'] as $user) {
		$linkAvatar = Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/avatar/'.$user['avatar'];
		$nameLike = $user['name'];
		$idLike = $user['id'];

		$relation = $user['relation'];
		$quantitySameFriend = $user['quantitySameFriend'];

		echo <<<LIKE
			<div style="width:100%;padding: 10px 0;border-bottom: solid 1px #CCC; margin-bottom: 10px;height: 60px;clear: both;">
				<div style="width:15%;float:left;">
					<img src="$linkAvatar" style="width:70%;border:solid 1px #CCC;">
      			</div>
				<div style="width:60%;float:left;font-size: 1.3em;font-weight:bold;padding-top: 10px;">
					$nameLike<br/>
LIKE;
				if($relation != 'Chính mình')
				echo '<span style="font-size: 0.7em;font-weight: normal;">'.$quantitySameFriend.' bạn chung</span>';
			echo <<<LIKE
				</div>
				<div style="width:25%;float:right;">
LIKE;
		if($relation != 'Chính mình')
			echo '<button style="width: 100%;height: 40px;margin-top:9px;">'.$relation.'</button>';
		echo <<<LIKE
				</div>
			</div>
LIKE;
	}
echo "</div></div>";

echo '<div id="divComentContent'.$music['type'].$music['id'].'">';
	if(isset($music['comment'][0]))
	{
		//echo '-----------------------COMMENT----------------------';
		foreach ($music['comment'] as $comment)
		{
			$avatar = Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/avatar/'.$comment['user']['avatar'];
			$name = $comment['user']['name'];
			$content = $comment['content'];
			$link = Yii::app()->request->baseUrl.'/Page/Feed/'.$comment['user']['id'];

			$quantityLike = $comment['like']['quantity'];

			$linkIconLike = Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/iconLikeMini.png';

			$time = $comment['posttime'];
			echo <<<COMMENT
			<div style="width:100%; clear: both;height: 50px;">
			  <div style="width: 12%;float:left;">
			  	<img src="$avatar" style="border: solid 1px #CCC;width:90%;">
			  </div>
			  <div style="width: 88%;float:right;margin-top: 5px;">
			  	<strong><a href="$link">$name</a></strong>: $content
			  </div>
			  <div style="width: 88%;font-size: 0.8em;">
			  	$time.
			  	<a href="javascript:void(0)" style="font-weight: bold">Thích</a>
			  	<img src="$linkIconLike" class="btnOverplay"/>$quantityLike

			  	<div class="overlay-bg">
					<div class="overlay-content">
						<div style="width:100%;font-size: 1.5em;font-weight: bold; padding: 10px 0;border-bottom: solid 1px #CCC; margin-bottom: 10px;">Những người thích bình luận này</div>
COMMENT;
			foreach ($comment['like']['data'] as $user) {
				$linkAvatar = Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/avatar/'.$user['avatar'];
				$nameLike = $user['name'];
				$idLike = $user['id'];

				$relation = $user['relation'];
				$quantitySameFriend = $user['quantitySameFriend'];
				echo <<<LIKE
			<div style="width:100%;padding: 10px 0;border-bottom: solid 1px #CCC; margin-bottom: 10px;height: 60px;clear: both;">
				<div style="width:15%;float:left;">
					<img src="$linkAvatar" style="width:70%;border:solid 1px #CCC;">
      			</div>
				<div style="width:60%;float:left;font-size: 1.3em;font-weight:bold;padding-top: 10px;">
					$nameLike<br/>
LIKE;
				if($relation != 'Chính mình')
				echo '<span style="font-size: 0.7em;font-weight: normal;">'.$quantitySameFriend.' bạn chung</span>';
			echo <<<LIKE
				</div>
				<div style="width:25%;float:right;">
LIKE;
			if($relation != 'Chính mình')
				echo '<button style="width: 100%;height: 40px;margin-top:9px;">'.$relation.'</button>';
			echo <<<LIKE
				</div>
			</div>
LIKE;
			}

			echo <<<COMMENT
					</div>
			  	</div>

			  </div>
			</div>
COMMENT;
		}
	}
echo "</div>";
			$user_id = Yii::app()->user->getId();
			$data['user'] = UserController::view($user_id);
			$nameUser = $data['user']['name'];
			$musicId = $music['id'];
			$type = $music['type'];
			$avatar = Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/avatar/'.$data['user']['avatar'];
			$divComent = 'divComentContent'.$music['type'].$music['id'];
	echo <<<INPUT
			<div style="width:100%; clear: both;height: 50px;">
			  <div style="width: 12%;float:left;">
			  	<img style="border: solid 1px #CCC;width:90%;" src="$avatar">
			  </div>
			  <div style="width: 88%;float:right;margin-top: 8px;">
			  	<form action="" method="post" name="commentForm$type$musicId" class="commentForm">
          		<input type="text" name="contentComment" style="width: 100%; height:30px;border: solid 1px #CCC;">
          		<input type="hidden" name="type" value="$type"/>
          		<input type="hidden" name="id" value="$musicId"/>
          		<input type="hidden" name="user" value="$user_id"/>
          		<input type="hidden" name="avatar" value="$avatar"/>
          		<input type="hidden" name="div" value="$divComent"/>
          		<input type="hidden" name="name" value="$nameUser"/>
          		</form>
			  </div>
			</div>
INPUT;
	echo '</div></div>';

	if($currentQuantity ==1){
		?>
		<div class="feedContentLeft" style="background: white; margin-top: 0; box-shadow:none; border-left: solid 1px #CCC;border-right: solid 1px #CCC;border-bottom: solid 1px #CCC;">
			<img src="<?php echo Yii::app()->request->baseUrl.'/themes/fly_high/assets/img/borderStatus.png'?>" style="float: left; clear: both; margin-top: -18px; margin-left: 50px;">
			<div class="containerContentFeed">
				<form>
					<input type="text" name="content" value="Bạn đang nghĩ gì" style="border: none; padding: 2px; width: 100%;color: #646464;" />
				</form>
			</div>
		</div>
		<?php
	}
}
?>
</div>
<div id="divContentEnd" style="clear: both; "></div>
<script type="text/javascript">
	$(document).ready(function() {
	    $('.overlay-bg').click(function() {
	        $(this).fadeOut();
	    });

		$(".btnOverplay").click(function(){
			$(this).siblings('div.overlay-bg').fadeIn();
			$(this).siblings('div.overlay-content').animate({ scrollTop: 10 }, 'slow');

		});
	});
	var currentPage = 1;
	var userPage = '<?php echo $userPage;?>';
	var currentQuantity = <?php echo $currentQuantity;?>

	$(document).scroll(function () {
	    var heightCoverPhoto = parseInt($('#coverPhoto').height());
	    var position = $('#coverPhoto').offset();
	    if(($(window).scrollTop() + 46) >= (position.top+heightCoverPhoto)){
	        $('#contentRight').css('position', 'fixed');
	        $('#contentRight').css('right', '0');
	        $('#contentRight').css('z-index', '999');
	        $('#contentRight').css('top', '46');
	        $('#contentRight').css('width', '220px');
	        $('#contentRight').css('height', '100%');
	        $('#contentRight').css('overflow', 'auto');
	    }else{
	        $('#contentRight').css('position', 'relative');
	        $('#contentRight').css('width', '20%');
	        $('#contentRight').css('height', 'auto');
	        $('#contentRight').css('overflow', 'none');
	        $('#contentRight').css('top', '0');
	    }
	});
</script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/themes/fly_high/assets/js/list-music.js"></script>